import React, { Component } from 'react';
import Link from 'umi/link';
import router from 'umi/router';
import { connect } from 'dva';
import withRouter from 'umi/withRouter';
import { Icon, Menu, Tooltip } from 'antd';
import styles from '@/components/BasicHeader/index.less';

import memoryUtils from '@/utils/memoryUtils';

const { SubMenu } = Menu;

class SubSystemHeader extends Component {

  constructor(props) {
    super(props);
    const { location } = this.props;
    const url = location.pathname.split("/");
    this.$subSystemHandle = url[2];
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'subSystem/fetch', payload: {subSystemOrd: 'station:|h:' + this.$subSystemHandle}});
  }

  buildSubNavMenus = (subModules, $handle)=>{
    let navMenus = [];
    if(subModules) {
      navMenus = subModules.map((subModule) => {
        if(subModule.children) {
          return (
            <Menu.ItemGroup title={<span className='title' title={subModule.title}>{subModule.title}</span>}>
              {this.buildSubNavMenus(subModule.children, $handle)}
            </Menu.ItemGroup>
          );
        } else {
          const path = '/subSystemm/' + this.$subSystemHandle + '/' + subModule.$handle;
          if(subModule.$handle === $handle) {
            this.selected = true;
          }
          return  <Menu.Item key={subModule.$handle}>
            <Link to={path} className='title' title={subModule.title}>{ subModule.title }</Link>
          </Menu.Item>;
        }
      });
    }
    return navMenus;
  }

  buildNavMenus = (subModules, $handle)=>{
    let navMenus = [];
    if(subModules) {
      navMenus = subModules.map((subModule, index) => {
        this.selected = false;
        if(subModule.children) {
          const subNavMenus = this.buildSubNavMenus(subModule.children, $handle);
          return (
            <SubMenu title={<span className='title' title={subModule.title}>{subModule.title}</span>} style={(index<subModule.length-1)?{borderRight: '1px solid #cccccc'}:{}}>
              {subNavMenus}
            </SubMenu>
          );
        } else {
          const path = '/subSystemm/' + this.$subSystemHandle + '/' + subModule.$handle;
          return (
            <Menu.Item key={subModule.$handle} style={(index<subModule.length-1)?{borderRight: '1px solid #cccccc'}:{}}>
              <Link to={path} className='title' title={subModule.title}>{ subModule.title }</Link>
            </Menu.Item>
          );
        }
      });
    }
    navMenus.push(
      <Menu.Item key={'index'}>
        <Link to={'/'}>返回首页</Link>
      </Menu.Item>
    );
    return <Menu selectedKeys={[$handle]} mode="horizontal" theme="dark" style={{background: 'transparent', margin:'20px 0', height:'24px', lineHeight: '24px'}}>{ navMenus }</Menu>;
  }

  render() {
    const { title, subModules, loading, location } = this.props;
    const url = location.pathname.split("/");
    const $handle = url[3];
    return (
      <div className={styles.header}>
        <div className={styles.logo} onClick={()=>router.replace('/')}>
          <img src={'/file/html/static/logo.png'}/>&nbsp;<span title={title}>{title}</span>
        </div>
        <div className={styles.menusWrap}>
          {!loading?this.buildNavMenus(subModules, $handle):''}}
        </div>
        <div className={styles.info}>
          {memoryUtils.user.username}&nbsp;
          <Tooltip placement="bottom" title={'退出'}>
            <Icon type="poweroff" style={{cursor: 'pointer'}} onClick={()=>{window.open('/logout', '_self');}}/>
          </Tooltip>
        </div>
      </div>
    );
  }
}


export default connect(({ subSystem, loading }) => ({
  ...subSystem,
  loading: loading.effects['subSystem/fetch'],
}))(withRouter(SubSystemHeader));
